<template>
	<div class="short1 swiper">
		<div class="short1-swiper1">
			<ol class="swiper-wrapper">
				<li v-for="(it,i) in short1List" :key="i" class="swiper-slide" @click="index=i" :class="{'selected':index==i}">{{it.title}}</li>
			</ol>
		</div>
		<div v-for="(it,i) in short1List" class="short1-swiper2" :key="i">
			<ul v-if="i==index" class="swiper-wrapper">
				<li v-for="(item,id) in typelist" :key="id" class="swiper-slide">
					<router-link to="/" v-for="items in item" :key="items.pid">
						<article>
							<h4><span>{{items.placeLabel}}</span>|{{items.days}}</h4>
							<img :src="getImg(items.image)"/>
							<p>￥{{items.priceLabel}}起</p>
						</article>
						{{items.simpleName}}
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {onMounted} from 'vue'
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Short1',
		data(){
			return{
				short1List:[],
				index:0
			}
		},
		methods:{
			getImg(url){
				if (url!='') {
					return url.substring(0,6)==='https'?'https://images.weserv.nl?url='+url.substring(8):'https://images.weserv.nl?url='+url.substring(7)
				}
			},
			getShort1(){
				this.axios.get(`https://m.youxiake.com/api/m/index/part?uid=&sitecode=1&city_id=1&refreshCount=5`).then((res)=>{
					this.short1List=res.data.data.aroundLump.weekList
					
				}).catch((error)=>{
					console.log(error)
				})
			}
		},
		created() {
			this.getShort1()
		},
		setup(){
			onMounted(()=>{
				new Swiper('.short1-swiper1',{
					slidesPerView:4,
					observer:true,
					observeParents:true,
				})
				new Swiper('.short1-swiper2',{
					observer:true,
					observeParents:true,
				})
			})
		},
		computed:{
			typelist(){
				let arr=[]
				for (let i in this.short1List[this.index].productList) {
					let index=Math.floor(i/6)
					if (!arr[index]) {
						arr[index]=[]
					}
					arr[index].push(this.short1List[this.index].productList[i])
				}
				return arr
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.short1{
		padding-top: 0.5rem;
	}
	.short1 ol{
		width: 100%;
	}
	.short1 ol li{
		width: 20%;
		height: 0.7rem;
		border: 0.01rem solid gainsboro;
		border-radius: 0.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.short1 ul{
		width: 100%;
		height: 100%;
	}
	.short1 ul li{
		float: left;
		width: 100%;
		height: 100%;
		display: inline-block;
	}
	.short1 ul li a{
		width: 32%;
		height: 40%;
		float: left;
		margin: 0.5%;
		font-weight: bold;
		font-size: 0.3rem;
	}
	.short1 ul li a article{
		width: 100%;
		height: 100%;
		float: left;
	}
	.short1 ul li a article h4{
		position: relative;
		top: 0.42rem;
		float: right;
		color: white;
		background: rgba(0,0,0,0.6);
		font-weight: normal;
		border-radius: 0.05rem;
		padding: 0.03rem;
		display: inline-block;
	}
	.short1 ul li a article h4 span{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 1.5rem;
		display: inline-block;
	}
	.short1 ul li a article img{
		width: 100%;
		height: 2.4rem;
		border-radius: 0.2rem;
	}
	.short1 ul li a article p{
		position: relative;
		bottom: 0.4rem;
		left: 0.1rem;
		color: white;
	}
	.selected{
		color: #ff9e51;
		font-weight: bold;
	}
</style>
